<template>
  <div class="Activity-detail pages-box">
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i>活动详情
      <i class="iconfont icon-gengduo"></i>
    </div>
    <div class="section">
      <div class="modules modules1">
        <img class="img" v-lazy="ImgDomin(info.coverImg)" alt="" />
        <div class="con">
          <div class="title-box flex-between">
            <div class="title">{{ info.activityTitle }}</div>
            <div class="edit flex-align">
              <div class="flex-align">
                <i class="iconfont icon-yanjing"></i>
                {{ info.browseNum || 0 }}
              </div>
              <!-- <i class="iconfont icon-edit"></i> -->
            </div>
          </div>
          <div class="tip">发布单位：{{ info.brandName }}</div>
          <div class="tip">审核单位：{{ info.auditName || "--" }}</div>
          <div class="addr-box flex-between">
            <div class="addr flex-align">
              <i class="iconfont icon-31dingwei"></i>
              <span>{{ info.activityAddress }}</span>
            </div>
            <!-- <div class="addr-icon">
              <img class="daohang" src="../assets/img/daohang.png" alt="" />
              <span>2.3km</span>
            </div> -->
          </div>
        </div>
      </div>
      <div class="modules modules2">
        <div class="box-t flex-align">
          <div class="it-box">
            <div class="time">预约截止时间</div>
            <span>{{ info.reserveEnd }}</span>
          </div>
          <div class="it-box">
            <div
              class="btn flex-center"
              :style="{
                background:
                status === 2  ? '#fd7895' : '#ccc',
              }"
              v-if="
                info.status === 0 ||
                info.status === 1 ||
                info.status === 2 ||
                info.status === 3 ||
                info.status === 4
              "
            >
              {{
                info.status === 0
                  ? "未开始"
                  : info.status === 1
                  ? "预约截止"
                  : info.status === 2
                  ? "进行中"
                  : info.status === 3
                  ? "已结束"
                  : info.status === 4
                  ? "已取消"
                  : ""
              }}
            </div>
          </div>
        </div>
        <div class="box-t flex-align">
          <div class="it-box">
            <div class="time">开始时间</div>
            <span>{{ info.startTime }}</span>
          </div>
          <div class="line"></div>
          <div class="it-box">
            <div class="time">结束时间</div>
            <span>{{ info.endTime }}</span>
          </div>
        </div>
      </div>
      <div class="modules modules2 modules3">
        <div class="box-t flex-align">
          <div class="it-box">
            <div class="time">联系方式</div>
            <span>{{ info.phone || "--" }}</span>
          </div>
          <div class="line"></div>
          <div class="it-box">
            <div class="time">联系人</div>
            <span>{{ info.contactP || "--" }}</span>
          </div>
        </div>
        <div class="slide-box">
          <div class="tip">报名人数</div>
          <div class="slide flex-between">
            <div class="progress">
              <van-progress color="#FF5520" :percentage="femalePercent" />
            </div>
            <div class="num">
              女性 {{ info.femaleNumHas }}/{{ info.femaleNum }}人
            </div>
          </div>
          <div class="slide flex-between">
            <div class="progress">
              <van-progress color="#FF5520" :percentage="malePercent" />
            </div>
            <div class="num">
              男性 {{ info.maleNumHas }}/{{ info.maleNum }}人
            </div>
          </div>
        </div>
      </div>
      <div class="modules modules4">
        <div class="title">活动详情</div>
        <div class="content" v-html="info.design || '--'"></div>
        <div
          class="appoint-btn flex-center"
          @click="info.status === 0 && appointment()"
          v-if="status !== 2"
          :style="{ background: info.status !== 0 ? '#ccc' : '' }"
        >
          立即预约
        </div>
        <div
          class="appoint-btn flex-center"
          @click="status === 2  && lookInfo()"
          :style="{
            background:
              status === 2  ? '#fd7895' : '#ccc',
          }"
        >
          查看报名人员信息
        </div>
      </div>
      <!-- 品牌首页的交友品牌 -->
      <div class="aa aa1">
        <div class="bland-box">
          <div class="bland-box-img">
            <img v-lazy="brandDetails.publicity" alt="" />
            <!--            <img src="https://jyly-img.hzgsredcross.org.cn/img/yang/temp/%E4%B8%8B%E8%BD%BD_1639903913981.png" alt="">-->
          </div>
          <div class="con">
            <div class="bland-title" style="font-size:18px;font-weight:bold;">{{ brandDetails.brandName }}</div>
            <div class="bland-desc">
              {{ brandDetails.introduce }}
            </div>
            <!--          <div class="join-btn flex-center" @click="join(brandDetails.id)">-->
            <!--            加入会员-->
            <!--          </div>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getActivityInfo, makeAppointment } from "@/api/activity";
import {getbrandinfo} from "../api/brand";
export default {
  data() {
    return {
      info: {},
      femalePercent: 0,
      malePercent: 0,
      status: null,
      brandDetails: [],
    };
  },
  created() {
    this.getInfo();
    this.getByInfo()
  },
  methods: {
    getByInfo(){
      getbrandinfo({id:this.$route.query.brandId}).then(res=>{
        this.brandDetails = res.data
        console.log(this.brandDetails,"1999");
      })
    },
    getInfo() {
      getActivityInfo({
        id: this.$route.query.id,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            let infos = res.data;
            this.femalePercent = parseInt(
              (infos.femaleNumHas / infos.femaleNum) * 100 || 0
            );
            this.malePercent = parseInt(
              (infos.maleNumHas / infos.maleNum) * 100 || 0
            );
            this.info = infos;
            this.status = res.data.status
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast("数据获取失败，请稍后重试！");
        });
    },
    // 立即预约
    appointment() {
      if (!localStorage.getItem("jyToken")) {
        return this.$router.push({
          name: "Login",
          query: {
            dirUrlName: "ActivityDetail",
            id: this.$route.query.id,
            type: 2,
          },
        });
      }
      makeAppointment({
        id: this.$route.query.id,
      }).then((res) => {
        if (res.code == 0) {
          this.$toast("预约成功");
          this.$router.push({ name: "MyActivity" })
        } else {
          this.$toast(res.msg);
        }
      });
    },
    //   查看报名人员信息
    lookInfo() {
      this.$router.push({
        name: "ApplicantInformation",
        query: { id: this.$route.query.id },
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/css/activity-detail.less");
</style>
